<template>
	<view class="check_address">
		<view class="search">
			<uni-search-bar
				class="public_sty"
				placeholder="选择城市、小区、写字楼、学校"
				@confirm="search"
				placeholder-style="color:#C0C0C0"
				bgColor="#ffffff"
				:radius="10"
				cancelButton="none"
			></uni-search-bar>
		</view>
		<view class="location">
			<!-- 没有定位授权 -->
			<view class="grant_location public_sty" v-if="locaHistorlist.length==0">
				<view class="">
					<uni-icons type="location" size="16" color="#999999"></uni-icons>
					<text style="margin-left: 3px;">直接授权定位</text>
				</view>
				<uni-icons type="arrowright" size="12" color="#999999"></uni-icons>
			</view>
			<!-- 有授权没有历史记录 -->
			<view class="histor_title">
				<text>当前地址：</text>
			</view>
			<view class="historecord_box public_sty">
				<view class="historecord_left">
					<view class="historecord_address">
						<text>{{ locationObj.address }}</text>
					</view>
					<view class="deils_address">
						<text>{{ locationObj.detailress }}</text>
					</view>
					<view class="historecord_address">
						<text style="margin-right: 20rpx;">{{ locationObj.name }}</text>
						<text>{{ locationObj.phone }}</text>
					</view>
				</view>
				<view class="" style="line-height: 70px;">
					<uni-icons color="#999999" type="arrowright" size="12" @click="modify(locationObj)"></uni-icons>
				</view>
			</view>
			<!-- 历史记录 -->
			<view class="histor_title">
				<text>历史地址：</text>
			</view>
			<view class="historecord_box public_sty" v-for="(item,index) in locaHistorlist" :key="index">
				<view class="historecord_left">
					<view class="historecord_address">
						<text>{{ item.address }}</text>
					</view>
					<view class="deils_address">
						<text>{{ item.detailress }}</text>
					</view>
					<view class="historecord_address">
						<text style="margin-right: 20rpx;">{{ item.name }}</text>
						<text>{{ item.phone }}</text>
					</view>
				</view>
				<view class="" style="line-height: 70px;">
					<uni-icons color="#999999" type="arrowright" size="12" @click="modify(item)"></uni-icons>
				</view>
			</view>
		</view>
		<!-- 提示 -->
		<view class="address_tips" v-if="locaHistorlist.length==0"><text>您还没有收货地址</text></view>
		<!-- 新增按钮 -->
		<button class="btn" v-if="locaHistorlist.length==0" type="primary" @click="addressBtn">
			<text style="font-size: 32rpx; margin-right: 10rpx;">+</text>
			<text>新增收货地址</text>
		</button>
		<view class="tips">
			<text>没有更多了</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			locationObj: {
				name: '张三',
				address: '上海市  浦东新区  陆家嘴街道',
				detailress: '金砖大厦12楼',
				phone: '17602334923'
			},
			locaHistorlist:[
				{
					name:"张三",
					address:'上海市  浦东新区  陆家嘴街道',
					detailress:'花园石桥路28弄21栋201',
					phone:'17602334923',
					defult:false,
				},
				{
					name:"张三",
					address:'上海市  浦东新区  陆家嘴街道',
					detailress:'东亚银行金融大厦',
					phone:'17602334923',
					defult:false,
				},
				{
					name:"张三",
					address:'上海市  浦东新区  陆家嘴街道',
					detailress:'银城中路501号上海中心大厦',
					phone:'17602334923',
					defult:false,
				},
			]
		};
	},
	methods: {
		addressBtn() {
			uni.navigateTo({
				url: '../address/addormodify'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.check_address {
	background-color: #f9faf9 100%;
	padding: 0px 30rpx;
	height: 100vh;
	.search {
		margin: 12px 0px;
		/deep/ .uni-searchbar__box {
			padding: 0rpx !important;
			border-width: 0rpx;
			text {
				color: #c0c0c0;
				font-weight: 400;
				opacity: 0.89;
			}
		}
		/deep/ .uni-icons {
			font-size: 28rpx !important;
			color: #c0c0c0 !important;
		}
	}
	/deep/ .uni-searchbar {
		border: 0.5px solid #e5e5e5;
		box-shadow: 0px 0px 33px 0rpx rgba(59, 67, 83, 0.05);
		border-radius: 20rpx;
		overflow: hidden;
		margin: 0px;
		padding: 0rpx;
	}
	.grant_location {
		display: flex;
		justify-content: space-between;
		align-locationObjs: center;
		padding: 19px 15px;
	}
	.histor_title{
		opacity: 0.9;
		font-size: 16px;
		color: #666666;
		font-weight: 500;
		margin: 8px 0rpx;
	}
	.historecord_box {
		display: flex;
		// align-locationObjs: center;
		justify-content: space-between;
		padding: 12px 30rpx;
	}
	.historecord_left {
		.historecord_address {
			font-size: 28rpx;
			color: #999999;
			/deep/ .uni-tag {
				padding: 0rpx 10rpx;
				line-height: 28rpx;
				font-size: 22rpx;
			}
		}
		.deils_address {
			color: #333333;
			font-weight: 550;
			margin: 5px 0px;
		}
	}

	// 提示
	.address_tips {
		position: absolute;
		top: 42%;
		left: 32%;
		font-size: 32rpx;
		color: #999999;
		text-align: center;
		letter-spacing: 0;
		font-weight: 500;
	}
	// 按钮
	.btn {
		position: fixed;
		bottom: 2%;
		left: 4%;
		width: 92%;
		border-radius: 20rpx;
		text {
			font-size: 14px;
		}
	}
}
</style>
